.react-music-player {
    position: absolute;
    top: 0;
    left: 0;

    .icon {
        cursor: pointer;
        display: flex;
        align-items: center;

        &:hover {
            opacity: .8;
        }
    }

    .bottom-panel {
        position: fixed;
        width: 100%;
        bottom: 0;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        .bottom-panel-content {
            height: 80px;
            border: 1px solid #666;
            padding: 0 30px;

            .pic {
                border-radius: 4px;
                box-shadow: 0 0 5px #666;
                width: 50px;
                height: 50px;
            }

            .info {
                height: 40px;
            }

            .volume-slider {
                width: 80px;
            }

            .player-slider {
                margin: 0 5px;
            }

        }

    }

    .mini-panel {
        border: 1px solid #666;
        box-shadow: 0 0 8px #444;
        position: fixed;
        .pic {
            width: 80px;
            height: 80px;

        }

        .music-icon {
            position: absolute;
            top: 100%;
            left: 100%;
            transform: translate(-100%, -100%);
        }

        .player-control {
            text-wrap: nowrap;
            margin-left: 10px;
        }
    }

    .lyric {

        -webkit-user-select: none;
        user-select: none;

        .backtop-lyric {

            &:hover {
                background-color: rgba(0, 0, 0, 0.4);
            }

            .backtop-lyric-text {
                overflow: hidden;
                margin: 0 20px;

                .line {
                    white-space: nowrap;
                    transition: all .1s linear;
                }
            }
        }

        .line {
            text-align: center;

            .word {
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                transition-duration: .25s;
                transition-property: background-image;
                transition-timing-function: linear;
            }

        }

        .trans {
            text-align: center;

            .word {
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                transition-duration: .25s;
                transition-property: background-image;
                transition-timing-function: linear;
            }
        }
    }

    .audio-list-title {
        font-size: 16px;
    }

    .audio-list-content {
        width: 480px;

        .audio-list-item {
            cursor: pointer;

            &:hover .menu {
                display: flex;
            }
        }

        .menu {
            width: 60px;
            display: none;
        }
    }

    .name {
        font-size: 14px;
        white-space: nowrap;
        /* 防止换行 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }

    .author {
        font-size: 14px;
    }

    .line-icon {
        border-left: 1px solid #333;

    }

    .pic {
        img {
            width: 100%;
            height: 100%;
        }

    }
}